<template>
  <div class="home">
    <img class="top" src="@/assets/蒙版组 2.png" alt="" />
    <div class="second">
      <div class="container">
          <van-field
            v-model="qqvalue"
            placeholder="请输入充值QQ号"
          >
          <template #right-icon>
            <img class="iconImg" src="@/assets/编辑色块.png" alt="">
          </template>
          </van-field>
        <div>
          <div style="margin-bottom:10px"></div>
          <van-row>
            <van-col span="6"
              ><van-button
                :type="
                  buttonType == false && qqCode == '10' ? 'primary' : 'default'
                "
                @click="selectQqcode(10)"
                >10 Q币</van-button
              ></van-col
            >
            <van-col span="6"
              ><van-button
                :type="
                  buttonType == false && qqCode == '20' ? 'primary' : 'default'
                "
                @click="selectQqcode(20)"
                >20 Q币</van-button
              ></van-col
            >
            <van-col span="6"
              ><van-button
                :type="
                  buttonType == false && qqCode == '100' ? 'primary' : 'default'
                "
                @click="selectQqcode(100)"
                >100 Q币</van-button
              ></van-col
            >
            <van-col span="6">
              <van-field
              border
                v-model="qqCode1"
                format-trigger="onBlur"
                placeholder="其他数额"
              />
              </van-col
            >
          </van-row>
        </div>
        <div class="price">
          <span>{{ qqCode }}</span
          >元
        </div>
        <van-button type="primary" size="large" @click="payMoney"
          >立即充值</van-button
        >
      </div>
    </div>
    <img class="third" src="@/assets/截屏2022-01-15 21.55.02.png" alt="" />
    <img src="@/assets/截屏2022-01-15 21.57.56.png" class="last" alt="" />
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  data() {
    return {
      activeName: "a",
      qqvalue: "",
      // 控制蒙层是否显示
      show: false,
      value: "123",
      showKeyboard: false,
      qqCode: "0",
      qqCode1:'',
      // 按钮颜色
      buttonType: true,
      gameName: "",
    };
  },
  name: "Home",
  components: {},
  methods: {
    selectQqcode(val) {
      this.qqCode = val;
      this.qqCode1 =''
      this.buttonType = false;
    },
    payMoney() {
      if (this.qqCode == 0 ) {
        // this.$Dialog.confirm({
        //   title: "消息提示",
        //   message: "支付的金额需大于0",
        // });
        this.$dialog.alert({
          message: "支付的金额需大于0",
        });
      }
      if (this.qqCode > 0) {
        this.$router.push({
          path: "/pay",
          query: { qqCode: this.qqCode ,qqvalue:this.qqvalue},
        });
      }
    },
  },
  watch:{
    qqCode1(){
      if(this.qqCode1 >0) {
        this.qqCode =this.qqCode1
      }
      else {
        this.qqCode =0
      }
    }
  }
};
</script>

<style lang="less" scoped>
.home {
  background-color: #F3F3F3;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 0.25rem;
  line-height: 1.875rem;
  text-align: center;
  background-color: #39a9ed;
}
.payTitle {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.price {
  padding: 10px;
  background-color: #fff;
  span {
    color: #48b86d;
    font-size: 1rem;
  }
}

.last {
   width: 95%;
   margin: 4px 12px;
}
.top {
  width: 100%;
   margin: 0 5px;
}
.third {
    width: 95%;
   margin: 8px 12px;
}
.second {
    width: 95%;
  height: 260px;
  background-image: url("../assets/组 6.png");
  background-size: cover;
  margin: 3px 12px;
  position: relative;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  .container {
    position: absolute;
    top: 60px;
    width: 100%;
    height: 9.375rem;
  }
}
.iconImg {
  width: 16px;
  height: 16px;
}
</style>